<template>
  <el-drawer v-model="visible" :title="order.orderName" direction="rtl">
    <el-timeline>
      <el-timeline-item center placement="top">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
      </el-timeline-item>
      <el-timeline-item center v-for="(item, index) in timeList" :timestamp="item.createdTime" placement="top">
        <el-card>
          <el-row :span="24">
            <el-col :span="8">
              <el-tag v-if="item.isAdmin == 1" class="ml-2" type="danger"
                ><el-icon><Avatar /></el-icon>管理员</el-tag
              >
              <el-tag v-else-if="item.isAdmin == 0 && order.customerId == item.userId" class="ml-2" type="success"
                ><el-icon><Avatar /></el-icon>客户</el-tag
              >
              <el-tag v-else-if="item.isAdmin == 0 && order.producerId == item.userId" class="ml-2" type="warn"
                ><el-icon><Avatar /></el-icon>技术支持</el-tag
              >
              <el-tag v-else class="ml-2" type="danger"
                ><el-icon><Avatar /></el-icon>管理员</el-tag
              >
            </el-col>
            <el-col :span="8">
              <el-tag class="ml-2" type="success"
                ><h4>{{ item.process }}</h4></el-tag
              >
            </el-col>
            <el-col :span="4"></el-col>
            <el-col :span="2">
              <el-button type="danger" v-if="item.userId == userId" @click="handleDelete(item)" icon="Close" />
            </el-col>
          </el-row>

          <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider>
          <p>{{ item.content }}</p>
          <el-divider> </el-divider>
          <!--文件-->
          <view v-for="(sfile, sindex) in item.files" @click="downloadFile(sfile.id,item.id)">
            <file-cell :file="sfile" ref="fileCellRef"></file-cell>
          </view>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-drawer>
  <!--新增-->
  <el-dialog :title="title" v-model="open" width="500px" append-to-body>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="进度" prop="process">
        <el-input v-model="form.process" placeholder="请输入进度" style="width: 300px" />
      </el-form-item>
      <el-form-item label="进度描述" prop="content">
        <el-input v-model="form.content" type="textarea" placeholder="请输入进度描述" style="width: 300px" />
      </el-form-item>
      <el-form-item label="进度附件">
        <el-upload style="width: 240px; height: 80px" class="avatar-uploader" with-credentials name="file" action="https://grad.apisev.cn/grad/process/upload" :on-success="afterFileUpload" show-file-list multiple>
          <el-icon class="avatar-uploader-icon"><upload-filled /></el-icon>
          <template #tip>
            <div class="el-upload__tip">上传文章附件</div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import FileCell from "@/module/disk/components/FileCell/index";
import { queryList, createOne, deleteOne } from "@/api/process";
import useUserStore from '@/store/modules/user'
const props = defineProps({
  order: {
    type: [Object],
  },
});
const emit = defineEmits(["confirm"]);
const { proxy } = getCurrentInstance();
const visible = ref(false);
const open = ref(false);
const title = ref("进度提交");
const timeList = ref([]);
const userId = ref(useUserStore().userId)
const form = ref({
  orderId: props.order.id,
  process: undefined,
  content: undefined,
  fileIds: [],
});
const rules = ref({
  process: [{ required: true, message: "进度不能为空", trigger: "blur" }],
  content: [{ required: true, message: "进度描述为空", trigger: "blur" }],
});
// 下载文件
function downloadFile(fileId,processId){
  
  window.location.href = 'https://grad.apisev.cn/grad/process/download?fileId='+fileId+'&processId='+processId
}
// 删除
function handleDelete(item){
  proxy.$modal
    .confirm('是否确认删除进度？')
    .then(function () {
      deleteOne(item.id).then(res=>{
        processQuery();
      })
    })
    .then(() => {
    
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
// 上传进度
function submitForm() {
  form.value.orderId = props.order.id;
  createOne(form.value).then((res) => {
    proxy.$modal.msgSuccess("新增成功");
    open.value = false;
    processQuery();
    proxy.resetForm("formRef");
  });
}
// 上传回调
function afterFileUpload(res) {
  let fileId = res.data.id;
  console.log(fileId);
  form.value.fileIds = form.value.fileIds.concat(fileId);
}
// 新增弹窗
function handleAdd() {
  open.value = true;
}
// 显示弹框
function show() {
  visible.value = true;
}
// 进度查询
function processQuery(tid) {
  let id = tid || props.order.id;
  const queryParams = {
    pageSize: 999,
    pageNum: 1,
    orderId: id,
  };
  proxy.$modal.loading("获取进度中~");
  queryList(queryParams).then((res) => {
    console.log(res);
    timeList.value = res.content;
    proxy.$modal.closeLoading();
  });
}
defineExpose({
  show,
  processQuery,
});
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 110px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
